<template>
  <div v-memo="[count]">App..</div>
  <!-- vue3没有.sync用法 -->
  <!-- <Child :count.sync="count" @setCount="count++" /> -->
  <!-- 如果只有一个数据需要双向数据绑定 v-model="xxx"-->
  <Child v-model="count" />
  <!-- 如果有多个数据需要双向数据绑定 v-model:xxx="xxx" -->
  <Son v-model:count="count" />

  <!-- 给组件绑定事件，默认都是原生DOM事件（事件名必须原生DOM事件的名称），如果不是原生DOM事件的名称，或者子组件内部声明接受事件，才是自定义事件 -->
  <Event @click="handleClick" />
</template>

<script lang="ts">
import Child from "./Child.vue";
import Son from "./Son.vue";
import Event from "./Event.vue";

export default {
  name: "App",
  /*
    模板语法：
      1. 插值语法（不变）

      2. 指令语法
        常用：
          v-bind
            vue2：v-bind.sync 用来父子组件双向通信
            vue3：移除 .sync 用法
          
          v-model
            vue2和vue3，给元素绑定v-model，用法一致

            vue2：
              v-model 给组件绑定 value 属性 和 input 事件
            vue3：
              v-model 给组件绑定 modelValue 属性 和 update:modelValue 事件
              v-model:xxx 给组件绑定 xxx 属性 和 update:xxx 事件

          v-on
            移除 .native 事件修饰符

            Vue2：给组件绑定事件，默认都是自定义事件，想要是原生DOM事件，加上.native
            Vue3：给组件绑定事件，默认都是原生DOM事件（事件名必须原生DOM事件的名称），如果不是原生DOM事件的名称，或者子组件内部声明接受事件，才是自定义事件
                  绑定原生DOM事件有一个前提：子组件必须有根标签

          v-if / v-else-if / v-else
          v-show
          v-for
          v-slot

            v-for 和 v-if 一起使用，优先级？
              vue2中：v-for优先级高 v-if优先级低（vue2两个不建议一起使用）
              vue3中：v-if优先级高 v-for优先级低（vue3可以一起使用）
        不常用：
          v-text
          v-html
          v-pre
          v-once
          v-cloak
          v-memo(Vue3新增指令)  
            
            keep-alive 缓存组件
            v-memo 缓存组件的部分DOM元素
              v-memo="[依赖项数据]"
                当依赖项数据发生变化，会重新渲染（不走缓存）
                当依赖项数据没有发生变化，走缓存
  */
  components: {
    Child,
    Son,
    Event,
  },
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    handleClick() {
      console.log("click~~~");
    },
  },
};
</script>

<style></style>
